import { Excalidraw, Footer, MainMenu, Sidebar, WelcomeScreen, useHandleLibrary, } from '@excalidraw/excalidraw'
import { useTheme } from '../../hooks/useTheme';
import { useLocation } from 'react-router-dom';
import { useEffect, useState } from 'react';

const DrawingBoard = ({ initialData, getData }: { initialData?: any; getData?: any }) => {
    const { theme }: any = useTheme();
    const location = useLocation();
    const [excalidrawAPI, setExcalidrawAPI] = useState<any>(null);
    useEffect(() => {
        window.name = "myValue";
        // excalidrawAPI?.updateLibrary({
        //     libraryItems:initialData.libraryItems,
        //     openLibraryMenu: true,
        //   });
    }, []);
    useHandleLibrary({ excalidrawAPI })
    return (<Excalidraw renderTopRightUI={() => {
        return (
            <Sidebar.Trigger
                name="custom"
                onToggle={() => {
                    console.log(123)
                    return getData(excalidrawAPI.getSceneElements())
                }}
                style={{
                    marginLeft: 24,
                }}
            >
                保存
            </Sidebar.Trigger>
        );
    }} initialData={initialData} excalidrawAPI={(api) => setExcalidrawAPI(api)}
        // onLibraryChange={(libraryItems) => { console.log(libraryItems) }}
        langCode={'zh-CN'} theme={theme}>
        <MainMenu>
            <MainMenu.DefaultItems.Export />
            <MainMenu.DefaultItems.ClearCanvas />
            <MainMenu.DefaultItems.Help />
            <MainMenu.DefaultItems.ToggleTheme />
            <MainMenu.DefaultItems.ChangeCanvasBackground />
        </MainMenu>

        <WelcomeScreen>
            <WelcomeScreen.Hints.ToolbarHint>
                <p> ToolBar Hints </p>
            </WelcomeScreen.Hints.ToolbarHint>
            <WelcomeScreen.Hints.MenuHint />
            <WelcomeScreen.Hints.HelpHint />
        </WelcomeScreen>
    </Excalidraw>)
}

export default DrawingBoard